<!--
 * @Description: 
 * @Author: 呆龙
 * @Date: 2023-09-14 09:19:45
 * @LastEditTime: 2023-09-14 15:57:08
 * @LastEditors: 呆龙
-->
<template>
  <!-- vue3页面 -->
  <div class="tableMain">
    <a-card>
      <a-select
        class="select"
        v-model:value="contingentName"
        show-search
        placeholder="请选择代表团(输入关键字查询)"
        :options="contingentList"
        :fieldNames="{ label: 'name', value: 'id' }"
        :filter-option="filterOption"
        allowClear
        @select="handleChange"
      ></a-select>
      <a-button
        type="primary"
        style="float: right"
        @click="showAddContingent = true"
        >+ 添加代表团</a-button
      >
    </a-card>
    <MyTable
      :useNumber="true"
      :pagination="pagination"
      :tableData="filterList.length > 0 ? filterList : contingentList"
      :columns="columns"
    >
      <template #Column="{ record, column }">
        <div v-if="column.dataIndex === 'action'">
          <a-dropdown>
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="setBaseUnion(record.id)"
                  >设置组成基层工会</a-menu-item
                >
                <a-menu-item key="2" @click="setCommandern(record.id)"
                  >设置团长/副团长</a-menu-item
                >
                <a-menu-item key="3" @click="editContingent(record.id)"
                  >编辑代表团名称</a-menu-item
                >
                <a-menu-item key="4" @click="deleteContingent(record.id)"
                  >删除</a-menu-item
                >
              </a-menu>
            </template>
            <a-button>
              <setting-outlined />
              <DownOutlined />
            </a-button>
          </a-dropdown>
        </div>
      </template>
    </MyTable>
    <a-modal
      v-model:visible="showAddContingent"
      title="添加代表团"
      :width="700"
      @ok="createContingent"
    >
      <a-form :model="formState" name="basic" ref="addContingentRef">
        <a-form-item
          name="teacher"
          label="所属教代会"
          has-feedback
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
          :rules="[{ required: true, message: '请选择所属教代会' }]"
        >
          <a-select
            v-model:value="formState.teacher"
            placeholder="请选择所属教代会"
          >
            <a-select-option value="1">第九届第四次</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          name="contingent"
          label="代表团名称"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 20 }"
          has-feedback
          :rules="[{ required: true, message: '请选择代表团名称' }]"
        >
          <a-select
            v-model:value="formState.contingent"
            placeholder="请选择代表团名称"
          >
            <a-select-option value="1">测试代表团</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      v-model:visible="showEditContingent"
      @ok="onEditContingentName"
      :width="700"
      style="top: 300px"
      :destroyOnClose="true"
      title="编辑代表团名称"
    >
      <a-form-item
        label="代表团名称"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        has-feedback
      >
        <a-input v-model:value="editContingentName" :maxlength="14"></a-input>
      </a-form-item>
    </a-modal>
    <MySetCommander
      :isShow="showCommander"
      @setCommander="showCommander = false"
    />
    <MySetUnion
      @setBaseUnion="showSetBaseUnion = false"
      :isShow="showSetBaseUnion"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import MyTable from "@/components/CommonDai/Table.vue";
import MySetUnion from "./setUnion.vue";
import MySetCommander from "./setCommander.vue";
import { SettingOutlined, DownOutlined } from "@ant-design/icons-vue";
import { message, FormInstance, Modal } from "ant-design-vue";
const props = defineProps<{
  contingentList: any[];
}>();
/**
 * 筛选功能 
 * contingentName 筛序规则的字符串
 * filterOption 筛选的函数
 * handleChange 选择后的函数
 */
const contingentName = ref<null | string>(null);
const filterList = ref<any[]>([]);
watch(
  () => contingentName.value,
  (newVal) => {
    if (!newVal) {
      filterList.value = []
    }
  }
);
// filterOption 筛选的函数 
const filterOption = (input: string, option: any) => {
  return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
// handleChange 选择后的函数
const handleChange = (_: string, option: any) => {
  // formState.id = option.id;
  // formState.mobile = option.mobile;
  // formState.unit = option.unit;
  // console.log(option);
  filterList.value[0] = option;
  console.log(filterList.value);
};
// 表格分页的数据
const pagination = ref({
  current: 1,
  defaultPageSize: 10,
  total: props.contingentList.length,
  showSizeChanger: true,
  showTotal: (total: number) => `一共 ${total} 条数据哦~`,
  onChange: (current: number, page: number) => {
    console.log(current, page);
    pagination.value.current = current;
  },
});
const columns = ref([
  {
    title: "代表团名称",
    dataIndex: "name",
    align: "center",
    isShow: true,
  },
  {
    title: "代表团编码",
    dataIndex: "code",
    align: "center",
    isShow: true,
  },
  {
    title: "所属代教会",
    customRender: () => {
      return "第九届第四次";
    },
    align: "center",
    isShow: true,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    isShow: true,
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    isShow: true,
  },
]);
/**
 * 添加代表团功能
 */
const showAddContingent = ref(false);
const addContingentRef = ref<FormInstance>();
const formState = reactive({
  teacher: null,
  contingent: null,
});
const createContingent = () => {
  console.log(formState);
  message.success("添加成功");
  showAddContingent.value = false;
  addContingentRef.value!.resetFields();
};
/**
 * 删除代表团功能
 */
const deleteContingent = (id: string | number) => {
  console.log(id);
  Modal.confirm({
    title: "你确定要删除吗？",
    onOk() {
      message.success("添加成功");
    },
    style: {
      top: "350px",
    },
  });
};
/**
 * 编辑代表团功能
 */
const editId = ref("");
const showEditContingent = ref(false);
const editContingentName = ref("");
const editContingent = (id: string | number) => {
  editContingentName.value = "";
  editId.value = id as string;
  showEditContingent.value = true;
};
const onEditContingentName = () => {
  if (editContingentName.value.trim() === "") {
    message.warning("请填写代表团名称");
  } else {
    showEditContingent.value = false;
    message.success("设置成功");
    console.log("id", editId.value);
    console.log("代表团名称", editContingentName.value);
  }
};
/**
 * 设置组成基层工会功能
 */
const showSetBaseUnion = ref(false);
const setBaseUnion = (id: string | number) => {
  console.log(id);
  showSetBaseUnion.value = true;
};
/**
 * 设置团长副团长功能
 */
const showCommander = ref(false);
const setCommandern = (id: string | number) => {
  console.log(id);
  showCommander.value = true;
};
</script>

<style scoped lang="less">
// .tableMain {
//   width: 100%;
//   height: 100%;
//   background: #ffffff;
// }
:deep(.ant-card-body) {
  padding: 20px;
}
.select {
  width: 300px;
}
:deep(.test) {
  transform: translateY(20%);
}
</style>
